import G2BaseChart from './G2BaseChart'

const PieChart = ({
  data,
  xField = 'name',
  yField = 'value',
  yField2 = 'percent',
  color = '#1890FF',
  width = 400,
  label = true,
  smooth = true,
  showArea = false,
}) => {
  const renderChart = (chart) => {
    chart.coordinate({ type: 'theta', outerRadius: 0.8 })

    chart
      .interval()
      .data(data)
      .transform({ type: 'stackY' })
      .encode('y', yField)
      .encode('color', xField)
      .legend('color', {
        position: 'left',
        layout: { justifyContent: 'center' },
        itemLabelFill: '#fff',
      })
      .label({
        position: 'outside',
        text: (data) =>
          `${label ? data.name + ':' : ''} ${(data.percent * 100).toFixed(0)}%`,
        fill: '#fff',
        connectorStroke: '#fff',
        transform: [{ type: 'overlapDodgeY' }],
      })
      .tooltip((data) => ({
        name: data.name,
        value: `${(data.percent * 100).toFixed(0)}%`,
      }))
    chart.render()
  }

  return <G2BaseChart data={data} width={width} render={renderChart} />
}

export default PieChart
